<template>
  <div class="boxTreatment">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">品项数分析</span>
      </div>
      <div  class="box-button">
        <el-button @click="dialogOpen">分析明细</el-button>
      </div>
      <s-table style="margin-top: 25px" :table="table" ref="table" @http="tableWatch" v-if="this.table.url !== ''">
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <el-collapse value="1">
        <!--name="1":设置collapse默认打开-->
        <el-collapse-item title="品项数分析" name="1">
          <s-form :form="formDialog" ref="formDialog">
            <el-row>
              <el-col :xs="24" :lg="{span: 10, offset: 0}">
                <el-form-item prop="cpflId" label="产品分类">
                  <el-select v-model="formDialog.cpflId"
                             filterable
                             multiple
                             @change="dialogRemoteCpflId"
                             @visible-change="dialogRemoteCpflIds"
                             placeholder="请选择产品分类">
                    <el-option
                      v-for="item in dialog.statistics"
                      :key="item.id"
                      :label="item.mc"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :lg="{span: 10, offset: 1}">
                <el-form-item prop="cpmcId" label="产品名称">
                  <el-select v-model="formDialog.cpmcId"
                             filterable
                             @change="dialogRemoteCpmcId"
                             multiple
                             placeholder="请选择产品名称">
                    <el-option
                      v-for="item in dialog.statistics1"
                      :key="item.id"
                      :label="item.mc"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :lg="{span: 23, offset: 0}">
                <!--render-content: 树节点的内容区的渲染 Function。 Function(h, { node, data, store }-->
                <el-tree
                  :props="{
                  label: 'mc',
                  children: 'children',
                  }"
                  :data="tree.data"
                  show-checkbox
                  ref="tree"
                  node-key="id"
                  :render-content="treeContent">
                </el-tree>
              </el-col>
            </el-row>
          </s-form>
          <!--
          <s-table :table="table" ref="table" @http="tableWatch" :expand="false" :pagination="false" :control="false">
          </s-table>
          -->
        </el-collapse-item>
      </el-collapse>
      <el-button slot="footer" @click="dialogSave">确定</el-button>
    </s-dialog>
  </div>
</template>

<script>
  /* eslint-disable no-trailing-spaces */

  import {AutoVue, AutoPromise} from '~/plugins/Tools';

  function __form () {
    return {
      // cpmcId: { value: '', rule: [ 'vNull__change' ], cRemarks: '' },
      cpmcId: { value: [], rule: [ '' ], cRemarks: '' },
      cpmcIds: { value: [], rule: [ '' ], cRemarks: '' },
      // cpflId: { value: '', rule: [ 'vNull__change' ], cRemarks: '' },
      cpflId: { value: [], rule: [ '' ], cRemarks: '' },
    };
  }
  export default AutoVue({
    name: 'outOperation_boxTreatment-FEcarWms',
    head: {
      'title': '品项数分析',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 品项数分析 查看品项数分析信息' },
      ],
    },
    store: ['ORDERCHANNEL'],
    data: {
      table: {
        column: [],
        url: '',
        key: 'id',
        muti: false,
        tableColumn: 6,
      },
      formDialog: __form(),
      dialog: {
        // 头部信息
        title: '品项数分析',
        // 行
        row: {},
        // 尺寸
        size: 'large',
        // 产品分类
        statistics: [],
        // 产品名称
        statistics1: [],
        cpflId: '',
        id: '',
      },
      options: [],
      //  声明一个tree
      tree: {
        data: [],
      },
      xbhinput: '',
      xbhinput_hx: '',
      xzlx: '',
      lxr: '',
      address: '',
      weight: '0.00',
      xxselect: '',
      xxselect_hx: '',
      xidarr: [],
      xbhid: '',
      hxid: '',
      objcheck: {},
    },
    transition: 'slide-fade',
    methods: {
      dialogInit () {
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen () {
        await AutoPromise([
          async () => {
            if (this.dialog.statistics.length === 0) {
              let {contentList} = await this.post('/statistics/goodsType');
              this.dialog.statistics = contentList;
              console.log('aaaaaaaaaaaaaaaaaaaaaaaa');
            }
          },
          /*
          async () => {
            let {contentList} = await this.post('/statistics/seachGoods', {
              ids: this.dialog.cpflId,
            });
            this.dialog.statistics1 = contentList;
          },
          */
        ]);
        this.dialog.visible = true;
        /*
        //  获取input聚焦(光标聚焦)
        setTimeout(() => {
          this.$refs.xbhjd.$el.children[0].focus();
        }, 500);
        */
      },
      async dialogRemoteCpflId (id) {
        console.log('iiii', id);
        let cpflId = '';
        console.log('cpflI', this.formDialog.cpflId);
        this.formDialog.cpflId.forEach(value => {
          cpflId += value + ',';
        });
        cpflId = cpflId.substring(0, cpflId.length - 1);
        this.dialog.cpflId = cpflId;
      },
      async dialogRemoteCpflIds (type) {
        if (!type) {
          let {contentList} = await this.post('/statistics/seachGoods', {
            ids: this.dialog.cpflId.split(','),
          });
          this.dialog.statistics1 = contentList;
          this.formDialog.cpmcIds = [];
        }
      },
      async dialogRemoteCpmcId (id) {
        // split() 方法用于把一个字符串分割成字符串数组。
        //        if (this.dialog.statistics.length !== 0) {
        //          let {contentList} = await this.post('/statistics/seachGoods', {
        //            ids: this.dialog.cpflId.split(','),
        //          });
        //          this.dialog.statistics1 = contentList;
        //        }
        let cpmcIds = '';
        id.forEach(function (value) {
          cpmcIds += value + ',';
        });
        cpmcIds = cpmcIds.substring(0, cpmcIds.length - 1);
        this.formDialog.cpmcIds = cpmcIds.split(',');
      },
      dialogSave () {
        this.dialog.visible = false;
        this.VALIDATE('formDialog', async option => {
          let cpflids = option.cpflId.concat(); // 产品分类
          let cpmcids = option.cpmcIds.concat(); // 产品名称
          console.log('cpmcids', cpmcids.length);
          let treeids = this.$refs.tree.getCheckedKeys().concat(); // 树

          let datas = {};
          datas['zlids'] = cpflids;
          if (cpmcids.length !== 0) {
            datas['hpids'] = cpmcids;
          }
          if (treeids.length !== 0) {
            datas['channeIds'] = treeids;
          }

          // 查询表头
          let column = [];
          column = await this.post('/statistics/goodsTypeStatisticsTitle', datas);
          this.table.tableColumn = column.column;

          if (column.length !== 0) {
            this.table.url = '/statistics/goodsTypeStatistics';
            this.table.option.zlids = cpflids;
            if (cpmcids.length !== 0) {
              this.table.option.hpids = cpmcids;
            }
            if (treeids.length !== 0) {
              this.table.option.channeIds = treeids;
            }
          }
          // 清空数据
          this.formDialog.cpflId = [];
          this.formDialog.cpmcId = [];
          this.$refs.tree.setCheckedKeys([]); // 清空tree所选
          this.tableWatch('table');
        });
      },
      treeClick (data) {
        this.tree.select = data;
        console.log('data:' + data);
      },
      // render-content: 树节点的内容区的渲染 Function。 Function(h, { node, data, store }
      treeContent (h, { node, data, store }) {
        return (
          <span>{data.lable}</span>);
      },
      xbhchange () {
      },
    },
    async mounted () {
      if (this.ORDERCHANNEL.orderChannel.length === 0) {
        this.SET('ORDERCHANNEL', await this.post('/wmsorderchannel/list'));
      }
      this.tree.data = [{
        id: '0',
        lable: '销售系统',
        orderChannelLevel: '-1',
        children: this.ORDERCHANNEL.orderChannel,
      }];
    },
  });
</script>
<style scoped lang="scss">
  .box-button {
    text-align:center;
    width:100%;
    height:100%;
    margin:0px;
  }
  .button {
    margin-left: 10px;
  }
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">

</style>
